// import Dashboard from './Dashboard'
// import Login from './Login'
// import Settings from './Settings'
// import ArticleList from './Article'
// import ArticleEdit from './Article/Edit'
// import NotFound from './NotFound'

import loadable from 'react-loadable'

// 下面注释的文件就是一个简易的 react-loadable 的原理
// import loadable from './loadable'
import { Loading } from '../components'

const Dashboard = loadable({
  loader: () => import('./Dashboard'),
  loading: Loading
})
const NotFound = loadable({
  loader: () => import('./NotFound'),
  loading: Loading
})
// 另一种写法
// const NotFound = React.lazy(() => import(/* webpackChunkName: 'notfound' */ './NotFound'))

const Settings = loadable({
  loader: () => import('./Settings'),
  loading: Loading
})
const ArticleList = loadable({
  loader: () => import('./Article'),
  loading: Loading
})
const ArticleEdit = loadable({
  loader: () => import('./Article/Edit'),
  loading: Loading
})
const ArticleAdd = loadable({
  loader: () => import('./Article/Add'),
  loading: Loading
})
const Login = loadable({
  loader: () => import('./Login'),
  loading: Loading
})
const Notifications = loadable({
  loader: () => import('./Notifications'),
  loading: Loading
})

const NoAuth = loadable({
  loader: () => import('./NoAuth'),
  loading: Loading
})

const Profile = loadable({
  loader: () => import('./Profile'),
  loading: Loading
})

const UserList = loadable({
  loader: () => import('./User'),
  loading: Loading
})

const UserRole = loadable({
  loader: () => import('./UserRole'),
  loading: Loading
})

export {
  Dashboard,
  Login,
  Settings,
  ArticleList,
  ArticleEdit,
  ArticleAdd,
  Notifications,
  UserList,
  UserRole,
  NoAuth,
  Profile,
  NotFound
}